﻿@inject IStringLocalizer<MultiSelectBindingString> Localizer

<div>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <MultiSelect Items="@Items" @bind-Value="@SelectedItemsValue" />
        </div>
        <div class="col-12 col-sm-6">
            <Button Icon="fa-solid fa-plus" Text="@Localizer["MultiSelectBindingStringAdd"]" OnClick="@AddItems" class="me-1" />
            <Button Icon="fa-solid fa-minus" Text="@Localizer["MultiSelectBindingStringDecrease"]" OnClick="@RemoveItems" />
            <Button Icon="fa-regular fa-trash-can" Text="@Localizer["MultiSelectBindingStringClean"]" OnClick="@ClearItems" />
        </div>
    </div>
    <div class="mt-3">@SelectedItemsValue</div>
</div>

@code {
    [NotNull]
    private List<SelectedItem>? Items { get; set; }

    [NotNull]
    private List<SelectedItem>? DataSource { get; set; }

    private string SelectedItemsValue { get; set; } = "Beijing";

    /// <summary>
    /// OnInitialized 方法
    /// </summary>
    protected override void OnInitialized()
    {
        base.OnInitialized();

        // 初始化数据
        DataSource = new List<SelectedItem>
        {
            new SelectedItem ("Beijing", "北京"),
            new SelectedItem ("Shanghai", "上海"),
            new SelectedItem ("Guangzhou", "广州")
        };

        Items = GenerateDataSource(DataSource);
    }

    private static List<SelectedItem> GenerateDataSource(List<SelectedItem> source) => source.Select(i => new SelectedItem(i.Value, i.Text)).ToList();

    private void AddItems()
    {
        SelectedItemsValue = "Beijing,Shanghai,Guangzhou";
    }

    private void RemoveItems()
    {
        SelectedItemsValue = "Beijing";
    }

    private void ClearItems()
    {
        SelectedItemsValue = "";
    }
}
